<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
	<script src="../bootstrap/js/jquery-2.1.0.min.js"></script>
	<script src="../bootstrap/js/bootstrap.min.js"></script>
    <style>
       .cus-container{
           width: 1368px;
       }
       #user-add .modal-content{
       	padding: 0 20px 20px;
       }
       #user-edit .modal-content{
       	padding: 0 20px 20px;
       }
       #user-list td{
			vertical-align: middle;
	   }
    </style>
</head>
<body>

    <div class="container cus-container">
        <!-- <h3 class="text-center">用户信息列表</h3> -->

        <div>
            <!-- 搜索框div -->
            <div id="search-user" style="float: left; margin: 10px 0px;">
                <form class="form-inline" action="${pageContext.request.contextPath}/menu/list" method="get">
                    <div class="form-group">
                        <input type="text" name="name" value="" class="form-control" placeholder="请输入关键字" id="exampleInputName2" >
                    </div>

                    <button type="submit" class="btn btn-default">查询</button>
<%--                    <button type="button" class="btn btn-default" onclick="clear()">清空</button>--%>
                </form>
            </div>

            <!-- 添加、删除的按钮 -->
            <div style="float: right;margin: 10px 0px;">
<%--                <a class="btn btn-primary" href="${pageContext.request.contextPath}/menu/add?pid=${pid}}">添加用户</a>--%>
<%--                <a class="btn btn-primary" href="">删除选中</a>--%>

            </div>
        </div>


       <table class="table table-bordered clearfix" id="user-list">
        <thead>
        	<tr class="bg-success">
            <th><input type="checkbox" id="selectAll"></th>
            <th>名称</th>
            <th>访问路径</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        <c:forEach items="${gai}" var="acl_permission">
            <tr style="background-color: #f5f5f5;">
                <td><input type="checkbox" class="parent-checkbox" data-id="${acl_permission.perm_id}"></td>
                <td>${acl_permission.name}</td>
                <td>${acl_permission.path}</td>
                <td>
                    <a class="btn btn-default btn-sm" href="${pageContext.request.contextPath}/menu/add?perm_id=${acl_permission.perm_id}" target="myFrame">添加菜单</a>&nbsp;
                    <a class="btn btn-default btn-sm" href="${pageContext.request.contextPath}/menu/huixian?perm_id=${acl_permission.perm_id}">修改</a>&nbsp;
                    <a class="btn btn-default btn-sm" href="">删除</a>
                </td>
            </tr>
            <c:forEach items="${acl_permission.children}" var="child">
                <tr>
                    <td style="padding-left: 30px;"><input type="checkbox" class="child-checkbox" data-parent-id="${acl_permission.perm_id}"></td>
                    <td>${child.name}</td>
                    <td>${child.path}</td>
                    <td>
                        <a class="btn btn-default btn-sm" href="${pageContext.request.contextPath}/menu/huixian?perm_id=${child.perm_id}">修改</a>&nbsp;
                        <a class="btn btn-default btn-sm" href="${pageContext.request.contextPath}/menu/delete?perm_id=${child.perm_id}">删除</a>
                    </td>
                </tr>
            </c:forEach>
        </c:forEach>
    </tbody>
</table>

<script>
    // 全选/全不选
    document.getElementById('selectAll').addEventListener('change', function() {
        const checkboxes = document.querySelectorAll('input[type="checkbox"]');
        checkboxes.forEach(checkbox => checkbox.checked = this.checked);
    });

    // 父菜单选中时，全选子菜单
    document.querySelectorAll('.parent-checkbox').forEach(parentCheckbox => {
        parentCheckbox.addEventListener('change', function() {
            const childCheckboxes = document.querySelectorAll('.child-checkbox[data-parent-id="' + this.dataset.id + '"]');
            childCheckboxes.forEach(checkbox => checkbox.checked = this.checked);
        });
    });

    // 子菜单全选时，自动选中父菜单
    document.querySelectorAll('.child-checkbox').forEach(childCheckbox => {
        childCheckbox.addEventListener('change', function() {
            const parentCheckbox = document.querySelector('.parent-checkbox[data-id="' + this.dataset.parentId + '"]');
            const childCheckboxes = document.querySelectorAll('.child-checkbox[data-parent-id="' + this.dataset.parentId + '"]');
            const allChecked = Array.from(childCheckboxes).every(checkbox => checkbox.checked);
            parentCheckbox.checked = allChecked;
        });
    });
</script>

         </tbody>
      </table>


      </div>



</body>
</html>